<template>
  <div class="container">
    <el-form ref="form" :model="form" :rules="rules" label-width="210px">
      <el-form-item label="指令类型" prop="command">
        <el-select
            v-model="form.command"
            size="small"
            placeholder="请填写指令类型"
            clearable
            filterable
        >
          <el-option
              v-for="item in $enum.getMapItems('command')"
              :key="item.value"
              :label="item.name"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="消息类型" prop="msgType">
        <el-select
            v-model="form.msgType"
            size="small"
            placeholder="请填写消息类型"
            clearable
            filterable
        >
          <el-option
              v-for="item in $enum.getMapItems('msgType')"
              :key="item.value"
              :label="item.name"
              :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="标题" prop="title" v-if="form.command === 'DIRECT_MSG' || form.command === 'SYS_NOTICE_MSG'">
        <el-input
            v-model="form.title"
            placeholder="请填写标题"
            clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="接收人" prop="receiverId" v-if="form.command === 'DIRECT_MSG'">
        <el-select
            class="handle-select mr10"
            v-model="form.receiverId"
            filterable
            placeholder="请输入关键词（工号、手机、用户名、邮箱、身份证、姓名）"
            @keyup.enter.native="handleEnter"
        >
          <el-option
              v-for="item in userList"
              :key="item.id"
              :label="item.username"
              :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="群" prop="chatGroupId" v-if="form.command === 'GROUP_CHAT_MSG'">
        <el-select
            v-model="form.receiverId"
            placeholder="请选择群"
            v-if="chatGroupList !== undefined && chatGroupList.length > 0"
            class="handle-select mr10"
            filterable
            clearable
            style="width: 300px"
        >
          <el-option
              v-for="item in chatGroupList"
              :key="item.id"
              :label="item.groupName"
              :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <el-input
            size="small"
            v-model="form.content"
            placeholder="请填写内容"
            type="textarea"
            :autosize="{ minRows: 50, maxRows: 50 }"
            show-word-limit
            maxlength="999"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="sendWsMsg">发送</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {createObjectBase, deepCopy} from "@/utils";
import {wsSendMsgApi} from "../../api/im/wsMsg";

import {
  userListByConditionApi,
} from "../../api/mgt/power/user";
import {chatGroupListByOrgIdApi} from "../../api/im/chatGroup";

const obj = {
  command: "",
  msgType: "",
  title: "",
  content: "",
  receiverId: "",
  chatGroupId: "",
};
export default {
  data() {
    return {
      form: deepCopy(obj),
      mailTplList: [],
      userList: [],
      chatGroupList: [],
      rules: {
        command: [
          {required: true, message: "请填写指令类型", trigger: "change"},
          {max: 50, message: "长度不能超过50个字符", trigger: "change"},
        ],
        title: [
          {required: true, message: "请填写标题", trigger: "change"},
          {max: 50, message: "长度不能超过50个字符", trigger: "change"},
        ],
        content: [
          {required: true, message: "请填写内容", trigger: "change"},
          {max: 999, message: "长度不能超过999个字符", trigger: "change"},
        ],
        msgType: [
          {required: true, message: "请填写消息类型", trigger: "change"},
          {max: 50, message: "长度不能超过50个字符", trigger: "change"},
        ],
        receiverId: [
          {required: true, message: "请填写接收人", trigger: "change"},
        ],
        chatGroupId: [
          {required: true, message: "请填写群", trigger: "change"},
        ],
      },
    };
  },
  created() {
    this.getChatGroupList();
  },
  methods: {
    getChatGroupList() {
      chatGroupListByOrgIdApi().then((res) => {
        this.chatGroupList = res?.bizData;
      });
    },
    handleEnter(event) {
      let param = event.target.value;
      userListByConditionApi({param}).then((res) => {
        this.userList = res?.bizData;
      });
    },
    // 发送
    sendWsMsg() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const data = createObjectBase(this.form, Object.keys(obj));
          wsSendMsgApi(data).then(() => {
            const tips = `消息推送成功`;
            this.$message.success(tips);
            if (this.$refs.form != undefined) {
              this.$refs['form'].resetFields();
            }
          });
        } else {
          return false;
        }
      });
    },
  }
};
</script>

<style scoped>
.upload-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.upload-list-li {
  position: relative;
  margin-top: 5px;
  line-height: 1.8
}

.upload-list-li:hover {
  background-color: #f5f7fa;
}

.upload-list-li-name {
  position: relative;
  margin-right: 40px;
  display: block;
}

.fa-file-text-o {
  margin-right: 7px;
}

.upload-list-li-label {
  position: absolute;
  right: 25px;
  top: 0;
}

.upload-list-li-label .el-icon-close {
  margin: 0 10px;
  font-size: 20px;
  color: red;
}
</style>
